<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
import type { TabsPaneContext } from 'element-plus'
const mainChart = ref<HTMLDivElement | null>(null);
const pieChart = ref<HTMLDivElement | null>(null);
const barChart = ref<HTMLDivElement | null>(null);
const VerticalChart = ref<HTMLDivElement | null>(null);
const mainChart2 = ref<HTMLDivElement | null>(null);
const barChart2 = ref<HTMLDivElement | null>(null);
const mainChart3 = ref<HTMLDivElement | null>(null);
const barChart3 = ref<HTMLDivElement | null>(null);
onMounted(() => {
  if (mainChart.value) {
    const myChart = echarts.init(mainChart.value);

    const option = {
      title: {
        text: '事件数变化趋势曲线'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['4.5', '4.6', '4.7', '4.8', '4.9', '4.10', '4.11', '4.12', '4.13', '4.14', '4.15', '4.16']
      },
      yAxis: {
        type: 'value'
      },
      series: [

        {
          name: '事件数',
          type: 'line',
          stack: '总量',
          areaStyle: {
            color: 'rgba(0, 0, 0, 0.0)' // 设置为透明色或其他非蓝色
          },
          lineStyle: {
            color: '#1890ff' // 设置为黑色或其他非蓝色
          },
          emphasis: {
            focus: 'series'
          },
          data: [18, 11, 12, 17, 19, 15, 9, 23, 21, 12, 20, 23]
        }
      ]
    };

    myChart.setOption(option);
  }
  if (pieChart.value) {
    const pieChartInstance = echarts.init(pieChart.value);

    const pieOption = {
      title: {
        text: '事件状态分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '状态',
          type: 'pie',
          radius: ['50%', '70%'], // 设置为环状图
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 34.78, name: '已处理', itemStyle: { color: '#36cbcb' } },
            { value: 30.43, name: '处理中', itemStyle: { color: '#4ecb73' } },
            { value: 21.74, name: '待处理', itemStyle: { color: '#3aa0ff' } },
            { value: 13.04, name: '无效', itemStyle: { color: '#fad337' } },

          ]
        }
      ]
    };

    pieChartInstance.setOption(pieOption);
  }
  if (pieChart.value) {
    // 已有的饼图初始化代码...
  }

  if (VerticalChart.value) {
    const VerticalChartInstance = echarts.init(VerticalChart.value);

    const VerticalOption = {
      title: {
        text: '人均事件图'
      },
      tooltip: {},
      yAxis: {
        data: ['张三', '李四', '王五', '老李', '老王'] // 示例数据
      },
      xAxis: {},
      series: [{
        name: '事件数',
        type: 'bar',
        data: [2, 2, 2, 3, 2] // 示例数据
      }]
    };

    VerticalChartInstance.setOption(VerticalOption);
  }
  if (barChart.value) {
    // 初始化条形图
    const barChartInstance = echarts.init(barChart.value);

    const barOption = {
      title: {
        text: '人均事件图'
      },
      tooltip: {},
      xAxis: {
        data: ["1天内", '2天', '3天', '4天', '大于5天'],
        type: 'category'
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          data: [17, 2, 1, 1, 2], // 示例数据，可以根据需要修改
          itemStyle: {
            color: '#fa7877'
          },
        }
      ]
    };

    barChartInstance.setOption(barOption);
  }
});
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {

}
const active = ref('0')
</script>

<template>

  <h1>数据总览</h1>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="统计汇总" name="first">
        <div class="statisticalbox">
          <div class="title">统计分析</div>
          <ul class="barbox">
            <li>
              <div class="numtitle">事件数</div>
              <div class="type"></div>
              <div class="num">23</div>
              <div class="numadd">+0.1%</div>
              <div class="progress">
                <div class="red"></div>
                <div class="yellow"></div>
                <div class="blue"></div>
                <div class="green"></div>
              </div>
            </li>
            <li>
              <div class="numtitle">派工数</div>
              <div class="type1"></div>
              <div class="num">20</div>
              <div class="numadd">-1.2%</div>
              <div class="progress">
                <div class="red"></div>
                <div class="gray"></div>
              </div>
            </li>
            <li>
              <div class="numtitle">紧急事件</div>
              <div class="type"></div>
              <div class="num">5</div>
              <div class="numadd">+0.5%</div>
              <div class="progress">

                <div class="yellow"></div>
                <div class="gray"></div>
              </div>
            </li>
            <li>
              <div class="numtitle">一般事件</div>
              <div class="type"></div>
              <div class="num">15</div>
              <div class="numadd">+5%</div>
              <div class="progress">

                <div class="blue"></div>
                <div class="gray"></div>
              </div>
            </li>
            <li>
              <div class="numtitle">无效事件</div>
              <div class="type1"></div>
              <div class="num">3</div>
              <div class="numadd">-1.9%</div>
              <div class="progress">

                <div class="green"></div>
                <div class="gray"></div>
              </div>
            </li>
            <li>
              <div class="numtitle">系统巡检故障</div>
              <div class="type"></div>
              <div class="num">16</div>
              <div class="numadd">+5%</div>
              <div class="progress">
                <div class="red"></div>
                <div class="yellow"></div>
                <div class="blue"></div>
                <div class="green"></div>
              </div>
            </li>
            <li>
              <div class="numtitle">业主上报故障</div>
              <div class="type"></div>
              <div class="num">7</div>
              <div class="numadd">+2%</div>
              <div class="progress">
                <div class="red"></div>
                <div class="gray"></div>
              </div>
            </li>
            <li>
              <div class="numtitle">在线维修人员</div>
              <div class="type1"></div>
              <div class="num">5</div>
              <div class="numadd">-2%</div>
              <div class="progress">

                <div class="yellow"></div>
                <div class="gray"></div>
              </div>
            </li>
            <li>
              <div class="numtitle">人均工单件</div>
              <div class="type"></div>
              <div class="num">4</div>
              <div class="numadd">+5%</div>
              <div class="progress">

                <div class="blue"></div>
                <div class="gray"></div>
              </div>
            </li>
            <li>
              <div class="numtitle">未处理事件</div>
              <div class="type1"></div>
              <div class="num">13</div>
              <div class="numadd">-0.3%</div>
              <div class="progress">

                <div class="green"></div>
                <div class="gray"></div>
              </div>
            </li>
          </ul>
        </div>
        <div class="StatisticalChart">
          <div class="Chart">
            <div class="chartTitle">事件数变化趋势曲线</div>

          </div>
          <div class="Chart">
            <div class="chartTitle">事件状态分布</div>
            <div ref="pieChart" style="height: 260px;"></div>
          </div>
          <div class="Chart">
            <div class="chartTitle">人均事件图</div>
            <div ref="VerticalChart" style="height: 260px; "></div>
          </div>
          <div class="Chart">
            <div class="chartTitle">
              工单处理时长</div>
            <div ref="barChart" style="height: 260px;"></div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="汇总详情" name="second">

        <div class="screeningTimebox">
          <div class="timeselect">筛选时间</div>

          <el-dropdown>
            <el-button type="primary" disabled class="timedisabled">
              2019-4-16<el-icon class="el-icon--right"><i class="el-icon-arrow-down"></i></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu class="disabled-dropdown-menu">
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown>
            <el-button type="primary" disabled class="timedisabled2">
              全部区域<el-icon class="el-icon--right"><i class="el-icon-arrow-down"></i></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu class="disabled-dropdown-menu">
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown>
            <el-button type="primary" disabled class="timedisabled3">

              请选择日期范围<el-icon class="el-icon--right"><i class="el-icon-arrow-down"></i></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu class="disabled-dropdown-menu">
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-tabs tab-position="left" class="demo-tabs" stretch>
          <el-tab-pane label="↓项目名称">User</el-tab-pane>
          <el-tab-pane label="都会艺境">Config</el-tab-pane>
          <el-tab-pane label="新城北">Config</el-tab-pane>
          <el-tab-pane label="华策中心">Config</el-tab-pane>
          <el-tab-pane label="金茂府">Config</el-tab-pane>
          <el-tab-pane label="融信·澜天">Config</el-tab-pane>
          <el-tab-pane label="旭辉时代城">Config</el-tab-pane>
          <el-tab-pane label="中铁·逸都">Config</el-tab-pane>
          <el-tab-pane label="融创金成·未来海">Config</el-tab-pane>
          <el-tab-pane label="祥生·群贤府">Config</el-tab-pane>
          <el-tab-pane label="绿城·富春玫瑰园">Config</el-tab-pane>
          <el-tab-pane label="朗诗·熙华府">Config</el-tab-pane>
          <el-tab-pane label="融信·澜天">Config</el-tab-pane>
          <el-tab-pane label="越秀·亲爱里">Config</el-tab-pane>
          <el-tab-pane label="钱江彩虹府">Config</el-tab-pane>
          <el-tab-pane label="西房·拱宸外滩">Config</el-tab-pane>
          <el-tab-pane label="时间名座">Config</el-tab-pane>
          <el-tab-pane label="都城天漾·滨沁公寓">Config</el-tab-pane>

        </el-tabs>
      </el-tab-pane>

    </el-tabs>

  </div>
</template>
<style lang="scss" scoped>
body li {
  list-style: none;
}

.demo-tabs {
  width: 90%;

  margin: 0px auto;
  background-color: white;


}

.el-tabs__content {
  transition: transform 0.3s ease;
}

.statisticalbox {
  width: 90%;
  height: 340px;
  margin: 10px auto;
  background-color: white;

  .title {
    font-size: 14px;
    padding: 20px;
  }

  .barbox {
    width: 96%;
    height: 260px;
    border: 1px solid;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;

    li {
      width: 20%;
      height: 50%;
      border: 1px solid;
      position: relative;

      .numtitle {
        font-size: 14px;
        position: absolute;
        top: 10px;
        left: 20px;
      }

      .num {
        font-size: 30px;
        position: absolute;
        top: 36px;
        left: 20px;
      }

      .numadd {
        position: absolute;
        top: 74px;
        left: 20px;
      }

      .type {
        width: 10px;
        height: 16px;
        border: 1px solid red;
        position: absolute;
        top: 10px;
        right: 20px;
      }

      .type1 {
        width: 10px;
        height: 16px;
        border: 1px solid green;
        position: absolute;
        top: 10px;
        right: 20px;
      }

      .progress {
        width: 90%;
        height: 20px;
        display: flex;
        justify-content: center;
        position: absolute;
        left: 5%;
        bottom: 8px;

        .red {
          width: 25%;
          height: 12px;
          background-color: red;
        }

        .yellow {
          width: 25%;
          height: 12px;
          background-color: yellow;
        }

        .blue {
          width: 25%;
          height: 12px;
          background-color: blue;
        }

        .green {
          width: 25%;
          height: 12px;
          background-color: #4bced0;

        }

        .gray {
          width: 75%;
          height: 12px;
          background-color: #e4e4e4;
        }
      }
    }
  }

}

.StatisticalChart {
  width: 90%;
  height: 640px;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;

  .Chart {
    width: 49.4%;
    height: 49%;
    background-color: white;

    .chartTitle {
      margin: 20px;
    }
  }

}

.screeningTimebox {
  width: 90%;
  height: 60px;
  background-color: white;
  position: relative;

  .timeselect {
    position: absolute;
    top: 12px;
    left: 60px;
  }

  .timedisabled {
    width: 200px;
    height: 46px;
    position: absolute;
    top: 0px;
    left: 380px;
    background-color: white;
    color: #cccccc;
    border: 1px solid #cccccc;
  }

  .timedisabled2 {
    width: 200px;
    height: 46px;
    position: absolute;
    top: 0px;
    left: 620px;
    background-color: white;
    color: #cccccc;
    border: 1px solid #cccccc;
  }

  .timedisabled3 {
    width: 200px;
    height: 46px;
    position: absolute;
    top: 0px;
    left: 860px;
    background-color: white;
    color: #cccccc;
    border: 1px solid #cccccc;
  }
}

.boxall {
  width: 1100px;
  height: 870px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;

  .rightbox {
    width: 540px;
    height: 420px;

    position: relative;

    .righticon {
      position: absolute;
      top: 24px;
      left: 20px
    }

    .righttitle {
      position: absolute;
      top: 20px;
      left: 40px
    }

    .rightimg {
      width: 480px;
      height: 360px;
      position: absolute;
      left: 20px;
      top: 40px;
    }
  }

  .tagbox {
    width: 480px;
    height: 360px;
    position: absolute;
    left: 20px;
    top: 40px;

    .tag1 {
      position: absolute;
      left: 40px;
      top: 120px;
      color: white;
    }

    .tag2 {
      position: absolute;
      left: 120px;
      top: 180px;
      color: white;
    }

    .tag3 {
      position: absolute;
      left: 200px;
      top: 80px;
      color: white;
    }

    .tag4 {
      position: absolute;
      left: 260px;
      top: 140px;
      color: white;
    }

    .tag5 {
      position: absolute;
      left: 80px;
      top: 260px;
      color: white;
    }

    .tag6 {
      position: absolute;
      left: 220px;
      top: 220px;
      color: white;
    }
  }
}
</style>